<template>
    <div class="search-box">
        <div class="banner">
            <img src="https://cxj.szzkba.cn/upload/i/2024/09/23/153910.png" alt="">
            <div>家电焕新季</div>
            <span>360°无死角深度清洁</span>
        </div>
        <div class="itemize">
            <div class="item" v-for="(item, index) in list" @click="jumpTo('/packageA/pages/order/index?id=' + index)">
                <span>
                    <img :src="item.extend" alt="">
                </span>
                <p>{{ item.label }}</p>
            </div>
        </div>
        <div class="entry flex-a flex-b">
            <div class="left" @click="jumpTo('/packageA/pages/order/index?id=3')">
                <div class="title">家电焕新季</div>
                <span class="info">360°无死角深度清洁</span>
            </div>
            <div class="right">
                <div class="top flex" @click="jumpTo('/packageA/pages/order/index?id=1')">
                    <div>
                        <span class="title">家电维修</span>
                        <span class="info">上门维修真省心</span>
                    </div>
                </div>
                <div class="bottom flex" @click="jumpTo('/packageA/pages/order/index?id=0')">
                    <div>
                        <span class="title">专场钜惠</span>
                        <span class="info">家庭保洁9元起</span>
                        <span class="look">去看看 》</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-box">
            <div class="p-title">精选推荐</div>
            <div class="p-list">
                <div class="p-item flex-a" v-for="item in serviceList"
                    @click="jumpTo('/packageA/pages/detail/index?id=' + item.ID)">
                    <div class="p-left">
                        <div class="img">
                            <img :src="item.remark" alt="">
                        </div>
                    </div>
                    <div class="p-right">
                        <div class="t flex-a flex-b">
                            <div>{{ item.project_Name }}</div>
                            <!-- <div class="price">￥{{ item.mini_Amount }}</div> -->
                            <div class="price">好评率：<text>100%</text></div>
                        </div>
                        <div class="s flex-a">
                            <span>售后保障</span>
                            <span>立减20元</span>
                        </div>
                        <div class="f flex-a flex-b">
                            <div class="price"><text>￥{{ item.mini_Amount }}</text>已售：823</div>
                            <div class="btn">立即预约</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { toRefs, reactive, onMounted } from 'vue';
import { Searchbar } from '@nutui/nutui-taro';
import { Search2 } from '@nutui/icons-vue-taro';
import { getIndexService, getIndexClass } from '../../../api/index'
export default {
    components: {
        'nut-searchbar': Searchbar,
        Search2
    },
    setup() {
        const state = reactive({
            searchValue: "",
            list: [
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701.png',
                    text: '家电清洗',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_1.png',
                    text: '家政服务',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_2.png',
                    text: '家电维修',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_3.png',
                    text: '管道疏通',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_4.png',
                    text: '地面养护',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_5.png',
                    text: '保姆月嫂',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_6.png',
                    text: '窗帘清洗',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_7.png',
                    text: '绿化养护',
                }
            ],
            serviceList: [],
        });
        onMounted(() => {
            getList()
            getClass()
        })
        const getList = () => {
            getIndexService().then(res => {
                if (res.code == 0) {
                    let arr = res.data.list, list = []
                    arr.forEach(item => {
                        if (item.project_Tag == 1) {
                            list.push(item)
                        }
                    });
                    state.serviceList = list
                }
            })
        }
        const getClass = () => {
            getIndexClass({ ID: 12 }).then(res => {
                if (res.code == 0) {
                    state.list = [...res.data.resysDictionary.sysDictionaryDetails,
                        // {
                        // extend: "https://cxj.szzkba.cn/upload/i/2024/08/16/103218.png",
                        // label: "全部",
                        // value: "-1",
                        // }
                    ]
                }
            })
        }
        const jumpTo = (path) => {
            Taro.navigateTo({
                url: path
            })
        }
        return {
            ...toRefs(state), getList, jumpTo, getClass
        };
    }
};
</script>
<style lang="scss">
.search-box {
    .banner {
        position: relative;
        padding: 0 32rpx;

        img {
            width: 100%;
            height: 300rpx;
        }

        div {
            position: absolute;
            color: #704221;
            font-weight: bold;
            font-size: 50rpx;
            left: 15%;
            top: 30%;
        }

        span {
            position: absolute;
            color: #784E31;
            font-size: 24rpx;
            left: 15%;
            top: 55%;
            display: inline-block;
            width: 260rpx;
            text-align: center;
            height: 45rpx;
            line-height: 45rpx;
            background: #E5C6B1;
            border-radius: 50rpx;
        }
    }

    .itemize {
        margin-top: 20rpx;
        padding: 0 32rpx;

        .item {
            display: inline-block;
            width: 20%;
            box-sizing: border-box;
            text-align: center;
            margin-bottom: 30rpx;

            span {
                padding: 20rpx 25rpx;
                border-radius: 20rpx;
                display: inline-block;

                img {
                    width: 74.4rpx;
                    height: 72rpx;
                }
            }

            p {
                font-size: 24rpx;
                font-weight: bold;
                margin-top: 10rpx;
            }
        }
    }

    .entry {
        padding: 0 32rpx;

        .left {
            width: 49%;
            background: url('https://cxj.szzkba.cn/upload/i/2024/09/23/171837.png')no-repeat 0 0;
            border-radius: 10rpx;
            height: 350rpx;
            box-sizing: border-box;
            background-size: 100% 100% !important;

            .title {
                color: #07092C;
                font-size: 32rpx;
                margin: 50rpx 0 0 40rpx;
                font-weight: bold;
            }

            .info {
                color: #61574B;
                font-size: 28rpx;
                margin: 10rpx 0 0 40rpx;
                width: 50%;
            }
        }

        .right {
            width: 49%;

            .top {
                background: url('https://cxj.szzkba.cn/upload/i/2024/09/24/094540.png')no-repeat 0 0;
                background-size: 100% 100% !important;
                height: 165rpx;
                border-radius: 10rpx;
                box-sizing: border-box;
                margin-bottom: 20rpx;
            }

            .bottom {
                background: url('https://cxj.szzkba.cn/upload/i/2024/09/24/094836.png')no-repeat 0 0;
                background-size: 100% 100% !important;
                height: 165rpx;
                border-radius: 10rpx;
                box-sizing: border-box;

                .look {
                    color: #F0AA42;
                    font-size: 22rpx;
                    margin: 20rpx 0 10rpx 20rpx;
                }
            }
        }

        .title {
            font-size: 28rpx;
            margin: 20rpx 0 10rpx 20rpx;
            font-weight: bold;
            color: #070A2C;
        }

        .info {
            color: #ABAAA9;
            font-size: 24rpx;
            margin: 0 0 0 20rpx;
            font-weight: bold;
        }
    }

    .product-box {
        padding: 0 32rpx;

        .p-title {
            font-size: 28rpx;
            font-weight: bold;
            margin: 30rpx 0 30rpx 0;
            color: #202341;
            text-align: left;
        }

        .p-list {
            width: 100%;
            background: #fff;

            .p-item {
                width: 94%;
                margin: 0 auto;
                padding: 20rpx 0;
                box-sizing: border-box;
                border-bottom: 1rpx solid #F5F5F5;

                .p-left {
                    margin-right: 20rpx;
                    width: 150rpx;

                    .img {
                        width: 150rpx;
                        height: 150rpx;
                        position: relative;
                        border-radius: 10rpx;
                        background: #EFEBEA !important;

                        img {
                            width: 100rpx;
                            height: 100rpx;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }
                }

                .p-right {
                    width: calc(100% - 150rpx);

                    .t {
                        font-size: 28rpx;
                        color: #292B49;

                        .price {
                            color: #AAA7A7;
                            font-size: 24rpx;

                            text {
                                color: #363855;
                            }
                        }
                    }

                    .i {
                        margin: 20rpx 0;
                        font-size: 26rpx;
                        color: #B3B3B3;
                    }

                    .s {
                        font-size: 20rpx;
                        margin: 10rpx 0;

                        span:first-child {
                            color: #F2B65D;
                            padding: 5rpx 14rpx;
                            border-radius: 5rpx;
                            background: #FDF5EB;
                            margin-right: 10rpx;
                        }

                        span:last-child {
                            color: #F2B65D;
                            padding: 5rpx 14rpx;
                            border-radius: 5rpx;
                            background: #FDF5EB;
                        }
                    }

                    .f {
                        .price {
                            color: #BFBFBF;
                            font-size: 22rpx;

                            text {
                                color: #DE5538;
                                font-size: 32rpx;
                                margin-right: 10rpx;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>